<template>
  <div class="form-container">
    <el-row :gutter="20">
      <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
        <el-form
          ref="ruleForm"
          :model="ruleForm"
          :rules="rules"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item
            :label="$t('accountManage.specialCodeAdds') /*特码赔率*/"
            prop="name"
          >
            <el-input v-model="ruleForm.odds"></el-input>
          </el-form-item>
          <el-form-item
            :label="$t('accountManage.specialCodeOnLine') /*特码上限*/"
            prop="name"
          >
            <el-input v-model="ruleForm.upperLimit"></el-input>
          </el-form-item>
          <el-form-item
            :label="$t('accountManage.specialCodeOffLine') /*特码下限*/"
            prop="name"
          >
            <el-input v-model="ruleForm.lowerLimit"></el-input>
          </el-form-item>
          <el-form-item
            :label="$t('accountManage.specialCodeExtraction') /*特码抽成*/"
            prop="name"
          >
            <el-input v-model="ruleForm.draw"></el-input>
          </el-form-item>
          <el-form-item
            :label="$t('accountManage.orderReissued') /*订单重打*/"
            prop="resource"
          >
            <el-radio-group v-model="ruleForm.resource">
              <el-radio :label="$t('accountManage.none') /*无*/"></el-radio>
              <el-radio :label="$t('accountManage.has') /*有*/"></el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item
            :label="$t('accountManage.redemption') /*兑奖日期*/"
            prop="name"
          >
            <el-date-picker
              v-model="ruleForm.date"
              type="date"
              :placeholder="$t('accountManage.redemption') /*兑奖日期*/"
            ></el-date-picker>
            <!-- <el-input v-model="ruleForm.draw"></el-input> -->
          </el-form-item>
          <el-form-item
            :label="$t('accountManage.receiptInfomation') /*小票打印信息*/"
            prop="desc"
          >
            <el-input v-model="ruleForm.desc" type="textarea"></el-input>
          </el-form-item>
          <el-form-item
            :label="$t('accountManage.orderNumber') /*禁购号码*/"
            prop="region"
          >
            <el-radio-group v-model="ruleForm.resource">
              <el-radio :label="$t('accountManage.shut') /*关闭*/"></el-radio>
              <el-radio :label="$t('accountManage.open') /*开启*/"></el-radio>
            </el-radio-group>
            <!-- <el-button type="primary" plain>添加</el-button> -->
          </el-form-item>

          <el-form-item label="" prop="region">
            <el-tag
              v-for="tag in dynamicTags"
              :key="tag"
              closable
              :disable-transitions="false"
              @close="handleClose(tag)"
            >
              {{ tag }}
            </el-tag>
            <el-input
              v-if="inputVisible"
              ref="saveTagInput"
              v-model="inputValue"
              class="input-new-tag"
              size="small"
              @keyup.enter.native="handleInputConfirm"
              @blur="handleInputConfirm"
            ></el-input>
            <el-button
              v-else
              class="button-new-tag"
              size="small"
              @click="showInput"
            >
              + New Tag
            </el-button>
          </el-form-item>
          <!-- <el-form-item label="即时配送" prop="delivery">
            <el-switch v-model="ruleForm.delivery"></el-switch>
          </el-form-item>
          <el-form-item label="活动性质" prop="type">
            <el-checkbox-group v-model="ruleForm.type">
              <el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>
              <el-checkbox label="地推活动" name="type"></el-checkbox>
              <el-checkbox label="线下主题活动" name="type"></el-checkbox>
              <el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>
            </el-checkbox-group>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')">
              立即创建
            </el-button>
            <el-button @click="resetForm('ruleForm')">重置</el-button>
          </el-form-item> -->
        </el-form>
      </el-col>
      <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
        <el-form
          ref="ruleForm"
          :model="ruleForm"
          :rules="rules"
          label-width="120px"
          class="demo-ruleForm"
        >
          <el-form-item
            :label="$t('accountManage.isAdditionSubtraction') /*是否有加奖*/"
            prop="resource"
          >
            <el-radio-group v-model="ruleForm.resource">
              <el-radio :label="$t('accountManage.none') /*无*/"></el-radio>
              <el-radio :label="$t('accountManage.has') /*有*/"></el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item
            :label="$t('accountManage.bounsOdds') /*加奖赔率*/"
            prop="name"
          >
            <el-input v-model="ruleForm.odds"></el-input>
          </el-form-item>
          <el-form-item
            :label="$t('accountManage.bounsOddsOn') /*加奖上限*/"
            prop="name"
          >
            <el-input v-model="ruleForm.upperLimit"></el-input>
          </el-form-item>
          <el-form-item
            :label="$t('accountManage.bounsOddsOff') /*加奖下限*/"
            prop="name"
          >
            <el-input v-model="ruleForm.lowerLimit"></el-input>
          </el-form-item>
          <el-form-item
            :label="$t('accountManage.bounsOddsPercent') /*加奖抽成*/"
            prop="name"
          >
            <el-input v-model="ruleForm.draw"></el-input>
          </el-form-item>
          <el-form-item
            :label="$t('accountManage.isUnk1') /*是否有灰球*/"
            prop="resource"
          >
            <el-radio-group v-model="ruleForm.resource">
              <el-radio :label="$t('accountManage.none') /*无*/"></el-radio>
              <el-radio :label="$t('accountManage.has') /*有*/"></el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item
            :label="$t('accountManage.greyballOdds') /*灰球赔率*/"
            prop="name"
          >
            <el-input v-model="ruleForm.odds"></el-input>
          </el-form-item>
          <el-form-item
            :label="$t('accountManage.specialCodeAmountLimit') /*特码金额限制*/"
            prop="name"
          >
            <el-button type="primary" plain>
              {{ $t('accountManage.add') /*增加*/ }}
            </el-button>
            <!-- <el-input v-model="ruleForm.odds"></el-input> -->
          </el-form-item>
          <el-table
            v-loading="listLoading"
            :data="list"
            :element-loading-text="elementLoadingText"
            @selection-change="setSelectRows"
          >
            <!-- <el-table-column show-overflow-tooltip type="selection"></el-table-column> -->
            <el-table-column
              show-overflow-tooltip
              prop="account"
              :label="$t('accountManage.number') /*号码*/"
            ></el-table-column>
            <el-table-column
              show-overflow-tooltip
              prop="account"
              :label="$t('accountManage.limitMoney') /*限制金额*/"
            ></el-table-column>
            <el-table-column
              show-overflow-tooltip
              :label="$t('common.operate') /*操作*/"
              width="60"
            >
              <template #default="{ row }">
                <el-button type="text" @click="handleDelete(row)">
                  {{ $t('accountManage.delete') /*删除*/ }}
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import userData from '@/views/accountManagement/userManagement/data.json'
export default {
  name: 'Form',
  data() {
    return {
      list: null,
      listLoading: true,
      selectRows: '',
      elementLoadingText: '正在加载...',
      dynamicTags: ['标签一', '标签二', '标签三'],
      inputVisible: false,
      inputValue: '',
      ruleForm: {
        name: '',
        region: '',
        delivery: false,
        type: [],
        resource: '',
        desc: '',
      },
      rules: {
        name: [
          { required: true, message: '请输入活动名称', trigger: 'blur' },
          {
            min: 3,
            max: 5,
            message: '长度在 3 到 5 个字符',
            trigger: 'blur',
          },
        ],
        region: [
          { required: true, message: '请选择活动区域', trigger: 'change' },
        ],
        type: [
          {
            type: 'array',
            required: true,
            message: '请至少选择一个活动性质',
            trigger: 'change',
          },
        ],
        resource: [
          { required: true, message: '请选择活动资源', trigger: 'change' },
        ],
        desc: [{ required: true, message: '请填写活动形式', trigger: 'blur' }],
      },
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    showEdit(form) {
      this.ruleForm = form
    },
    async fetchData() {
      this.listLoading = true
      const { data, totalCount } = userData || (await getList(this.queryForm))
      console.log(data, totalCount, '获取数据')
      this.list = data
      this.total = totalCount
      setTimeout(() => {
        this.listLoading = false
      }, 300)
    },
    handleDelete(row) {
      if (row.id) {
        this.$baseConfirm('你确定要删除当前项吗', null, async () => {
          const { msg } = await doDelete({ ids: row.id })
          this.$baseMessage(msg, 'success')
          this.fetchData()
        })
      } else {
        if (this.selectRows.length > 0) {
          const ids = this.selectRows.map((item) => item.id).join()
          this.$baseConfirm('你确定要删除选中项吗', null, async () => {
            const { msg } = await doDelete({ ids })
            this.$baseMessage(msg, 'success')
            this.fetchData()
          })
        } else {
          this.$baseMessage('未选中任何行', 'error')
          return false
        }
      }
    },
    setSelectRows(val) {
      this.selectRows = val
    },
    handleClose(tag) {
      this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1)
    },

    showInput() {
      this.inputVisible = true
      this.$nextTick((_) => {
        this.$refs.saveTagInput.$refs.input.focus()
      })
    },

    handleInputConfirm() {
      let inputValue = this.inputValue
      if (inputValue) {
        this.dynamicTags.push(inputValue)
      }
      this.inputVisible = false
      this.inputValue = ''
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert('submit!')
        } else {
          return false
        }
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
  },
}
</script>
